<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./flexible.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./common.css" />
    <link rel="stylesheet" type="text/css" href="./index.css" />
  </head>
  <body>
    <div class="page flex-col">
      <!-- header -->
       <div class="header-container">
      <!-- 顶部导航栏 -->
      <div class="section_2 flex-row">
        <div class="header-nav">
          <div class="header-nav-left">
            <div class="nav-item">
              <i class="home-icon"></i>
              <span class="text_1">学校主页</span>
            </div>
            <div class="nav-item">
              <i class="doc-icon"></i>
              <span class="text_2">院系介绍</span>
            </div>
          </div>
          <div class="header-nav-right">
            <div class="section_5 flex-row">
              <div class="group_1 flex-col"></div>
              <div class="group_2 flex-col"></div>
              <span class="text_3">单位注册</span>
              <div class="group_3 flex-col"></div>
            </div>
            <div class="section_6 flex-row">
              <div class="box_3 flex-col"></div>
              <div class="box_4 flex-col"></div>
              <span class="text_4">单位登录</span>
              <div class="box_5 flex-col"></div>
            </div>
            <div class="section_7 flex-row">
              <i class="user-icon"></i>
              <span class="text_5">校内师生登录</span>
            </div>
            <div class="section_8 flex-row">
              <span class="text_6">校友登录</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 主导航栏 -->
      <div class="section_10 flex-row">
        <div class="menu">
          <div class="menu-left">
            <img class="image_1" src="./img/logo.png" />
            <div class="block_1 flex-col"></div>
            <span class="text_7">学生职业发展中心</span>
          </div>
          <div class="menu-right">
            <div class="nav-item active" id="nav-home">
              <span class="nav-text">首页</span>
            </div>
            <div class="nav-item" id="nav-student">
              <span class="nav-text">学生服务</span>
            </div>
            <div class="nav-item" id="nav-company">
              <span class="nav-text">单位服务</span>
            </div>
            <div class="nav-item" id="nav-alumni">
              <span class="nav-text">校友服务</span>
            </div>
            <div class="nav-item" id="nav-about">
              <span class="nav-text">关于我们</span>
            </div>
            <div class="block_2 flex-col"></div>
          </div>
        </div>
      </div>

      <!-- 下拉菜单 -->
      <div class="section_11 flex-col">
        <div class="group_4 flex-col">
          <div class="block_3 flex-col dropdown-menu" id="student-dropdown">
            <span class="text_13">求职招聘</span>
            <div class="text-wrapper_3 flex-row justify-between">
              <span class="text_14">招聘公告</span>
              <span class="text_15">宣讲会</span>
              <span class="text_16">招聘会</span>
              <span class="text_17">毕业生事务</span>
            </div>
            <div class="group_5 flex-col"></div>
            <span class="text_18">毕业生事务</span>
            <div class="text-wrapper_4 flex-row justify-between">
              <span class="text_19">生源核对</span>
              <span class="text_20">推荐表登记</span>
              <span class="text_21">毕业去向登记</span>
            </div>
            <div class="group_6 flex-col"></div>
            <div class="group_7 flex-col">
              <span class="text_22">生活指导</span>
              <div class="text-wrapper_5 flex-row justify-between">
                <span class="text_24">AI简历</span>
                <span class="text_25">AI面试</span>
                <span class="text_26">在线测评</span>
                <span class="text_27">智学平台</span>
                <span class="text_28">学职平台</span>
                <span class="text_29">创业指导</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

      <!-- 主要内容区域 -->
      <div class="main-content">
        <div class="box_1 flex-row">
          <div class="section_1 flex-col">
            <div class="section_12 flex-col justify-center">
            <div class="box_10 flex-col">
              <div class="box_11 flex-col">
                <!-- 导航栏区域 -->
                <div class="nav-wrapper flex-row justify-between">
                  <!-- 招聘公告导航栏 -->
                  <div class="section_36 flex-row">
                    <div class="box_40 flex-col"></div>
                    <div class="text-wrapper_47 flex-col">
                      <span class="text_148 active" id="nav-job-announcement">招聘公告</span>
                    </div>
                    <span class="text_149" id="nav-presentation">宣讲会</span>
                    <span class="text_150" id="nav-job-fair">招聘会</span>
                    <span class="text_151">查看更多</span>
                    <img
                      class="thumbnail_3"
                      referrerpolicy="no-referrer"
                      src="./img/FigmaDDSSlicePNGc707c4fca7959e307bc531337fd12f3b.png"
                    />
                  </div>
                  <!-- 活动日历导航栏 -->
                  <div class="section_37 flex-row">
                    <div class="block_18 flex-col"></div>
                    <span class="text_152">活动日历</span>
                    <div class="image-text_3 flex-row justify-between">
                      <span class="text-group_17">查看更多</span>
                      <img
                        class="thumbnail_4"
                        referrerpolicy="no-referrer"
                        src="./img/FigmaDDSSlicePNGc707c4fca7959e307bc531337fd12f3b.png"
                      />
                    </div>
                  </div>
                </div>

                <!-- 导航栏下方的内容区域 -->
                <div class="content-wrapper flex-row justify-between">
                  <!-- 招聘公告内容 -->
                <div class="section_13 flex-col" id="job-announcement-content">
                  <div class="box_12 flex-row justify-between">
                    <div class="box_13 flex-row">
                      <div class="group_8 flex-row">
                        <div class="text-group_2 flex-row">
                          <span class="text_29">02</span>
                          <span class="text_30">2024.07</span>
                        </div>
                      </div>
                      <div class="group_9 flex-col justify-between">
                        <span class="text_31">
                          2025中山康方生物医药有限公司招聘
                        </span>
                        <div class="group_10 flex-row">
                          <span class="text_32">中山康方生物医药有限公司</span>
                          <span class="separator"> / </span>
                          <span class="text_33">国有企业</span>
                          <span class="separator"> / </span>
                          <span class="text_34">10个职位</span>
                        </div>
                      </div>
                    </div>
                    <div class="box_16 flex-row">
                      <div class="group_11 flex-row">
                        <div class="text-group_3 flex-row">
                          <span class="text_35">02</span>
                          <span class="text_36">2024.07</span>
                        </div>
                      </div>
                      <div class="group_12 flex-col justify-between">
                        <span class="text_37">
                          第五届职业教育教材建设和管理政策研究...
                        </span>
                        <div class="section_14 flex-row">
                          <span class="text_38">中山康方生物医药有限公司</span>
                          <span class="separator"> / </span>
                          <span class="text_39">国有企业</span>
                          <span class="separator"> / </span>
                          <span class="text_40">10个职位</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="box_19 flex-row justify-between">
                    <div class="box_20 flex-row">
                      <div class="group_13 flex-row">
                        <div class="text-group_4 flex-row">
                          <span class="text_41">02</span>
                          <span class="text_42">2024.07</span>
                        </div>
                      </div>
                      <div class="group_14 flex-col justify-between">
                        <span class="text_43">
                          大疆2026校招即将开启一起出发
                        </span>
                        <div class="section_15 flex-row">
                          <span class="text_44">企业</span>
                          <span class="separator"> / </span>
                          <span class="text_45">10个职位</span>
                        </div>
                      </div>
                    </div>
                    <div class="box_21 flex-row">
                      <div class="group_15 flex-row">
                        <div class="text-group_5 flex-row">
                          <span class="text_46">02</span>
                          <span class="text_47">2024.07</span>
                        </div>
                      </div>
                      <div class="group_16 flex-col justify-between">
                        <span class="text_48">
                          华东师范大学召开深入贯彻中央八项规定...
                        </span>
                        <div class="group_17 flex-row">
                          <span class="text_49">中山康方生物医药有限公司</span>
                          <span class="separator"> / </span>
                          <span class="text_50">国有企业</span>
                          <span class="separator"> / </span>
                          <span class="text_51">10个职位</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="box_22 flex-row justify-between">
                    <div class="block_4 flex-row">
                      <div class="block_5 flex-row">
                        <div class="text-group_6 flex-row">
                          <span class="text_52">02</span>
                          <span class="text_53">2024.07</span>
                        </div>
                      </div>
                      <div class="block_6 flex-col justify-between">
                        <span class="text_54">
                          上海市嘉定区金鹤学校2025学年编外教师...
                        </span>
                        <div class="section_17 flex-row">
                          <span class="text_55">教育</span>
                          <span class="separator"> / </span>
                          <span class="text_56">10个职位</span>
                        </div>
                      </div>
                    </div>
                    <div class="block_8 flex-row">
                      <div class="group_20 flex-row">
                        <div class="text-group_7 flex-row">
                          <span class="text_57">02</span>
                          <span class="text_58">2024.07</span>
                        </div>
                      </div>
                      <div class="group_21 flex-col justify-between">
                        <span class="text_59">
                          第五届职业教育教材建设和管理政策研究...
                        </span>
                        <div class="box_23 flex-row">
                          <span class="text_60">中山康方生物医药有限公司</span>
                          <span class="separator"> / </span>
                          <span class="text_61">国有企业</span>
                          <span class="separator"> / </span>
                          <span class="text_62">10个职位</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="box_24 flex-row justify-between">
                    <div class="group_24 flex-row">
                      <div class="block_9 flex-row">
                        <div class="text-group_8 flex-row">
                          <span class="text_63">02</span>
                          <span class="text_64">2024.07</span>
                        </div>
                      </div>
                      <div class="block_10 flex-col justify-between">
                        <span class="text_65">
                          第五届职业教育教材建设和管理政策研究...
                        </span>
                        <div class="group_25 flex-row">
                          <span class="text_66">中山康方生物医药有限公司</span>
                          <span class="separator"> / </span>
                          <span class="text_67">国有企业</span>
                          <span class="separator"> / </span>
                          <span class="text_68">10个职位</span>
                        </div>
                      </div>
                    </div>
                    <div class="group_28 flex-row">
                      <div class="block_11 flex-row">
                        <div class="text-group_9 flex-row">
                          <span class="text_69">02</span>
                          <span class="text_70">2024.07</span>
                        </div>
                      </div>
                      <div class="block_12 flex-col justify-between">
                        <span class="text_71">
                          第五届职业教育教材建设和管理政策研究...
                        </span>
                        <div class="group_29 flex-row">
                          <span class="text_72">中山康方生物医药有限公司</span>
                          <span class="separator"> / </span>
                          <span class="text_73">国有企业</span>
                          <span class="separator"> / </span>
                          <span class="text_74">10个职位</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 宣讲会内容 -->
                <div class="section_13 flex-col" id="presentation-content" style="display: none;">
                  <div class="box_12 flex-row justify-between">
                    <div class="presentation-card flex-row">
                      <div class="presentation-time-block flex-col justify-center">
                        <span class="presentation-time">11:00</span>
                        <div class="presentation-date">2025.07.11</div>
                      </div>
                      <div class="presentation-details flex-col justify-between">
                        <span class="presentation-company">上海米哈游网络科技股份有限公司</span>
                        <div class="presentation-location flex-row">
                          <img
                            class="location-icon"
                            referrerpolicy="no-referrer"
                            src="./img/FigmaDDSSlicePNG83762d4835a626986fd1d2eb9c56cd03.png"
                          />
                          <span class="location-text">华东师范大学学生活动中心2025</span>
                        </div>
                      </div>
                    </div>
                    <div class="presentation-card flex-row">
                      <div class="presentation-time-block flex-col justify-center">
                        <span class="presentation-time">11:00</span>
                        <div class="presentation-date">2025.07.11</div>
                      </div>
                      <div class="presentation-details flex-col justify-between">
                        <span class="presentation-company">上海米哈游网络科技股份有限公司</span>
                        <div class="presentation-location flex-row">
                          <img
                            class="location-icon"
                            referrerpolicy="no-referrer"
                            src="./img/FigmaDDSSlicePNG83762d4835a626986fd1d2eb9c56cd03.png"
                          />
                          <span class="location-text">华东师范大学学生活动中心2025</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="box_19 flex-row justify-between">
                    <div class="presentation-card flex-row">
                      <div class="presentation-time-block flex-col justify-center">
                        <span class="presentation-time">11:00</span>
                        <div class="presentation-date">2025.07.11</div>
                      </div>
                      <div class="presentation-details flex-col justify-between">
                        <span class="presentation-company">上海米哈游网络科技股份有限公司</span>
                        <div class="presentation-location flex-row">
                          <img
                            class="location-icon"
                            referrerpolicy="no-referrer"
                            src="./img/FigmaDDSSlicePNG83762d4835a626986fd1d2eb9c56cd03.png"
                          />
                          <span class="location-text">华东师范大学学生活动中心2025</span>
                        </div>
                      </div>
                    </div>
                    <div class="presentation-card flex-row">
                      <div class="presentation-time-block flex-col justify-center">
                        <span class="presentation-time">11:00</span>
                        <div class="presentation-date">2025.07.11</div>
                      </div>
                      <div class="presentation-details flex-col justify-between">
                        <span class="presentation-company">上海米哈游网络科技股份有限公司</span>
                        <div class="presentation-location flex-row">
                          <img
                            class="location-icon"
                            referrerpolicy="no-referrer"
                            src="./img/FigmaDDSSlicePNG83762d4835a626986fd1d2eb9c56cd03.png"
                          />
                          <span class="location-text">华东师范大学学生活动中心2025</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="box_22 flex-row justify-between">
                    <div class="presentation-card flex-row">
                      <div class="presentation-time-block flex-col justify-center">
                        <span class="presentation-time">11:00</span>
                        <div class="presentation-date">2025.07.11</div>
                      </div>
                      <div class="presentation-details flex-col justify-between">
                        <span class="presentation-company">上海米哈游网络科技股份有限公司</span>
                        <div class="presentation-location flex-row">
                          <img
                            class="location-icon"
                            referrerpolicy="no-referrer"
                            src="./img/FigmaDDSSlicePNG83762d4835a626986fd1d2eb9c56cd03.png"
                          />
                          <span class="location-text">华东师范大学学生活动中心2025</span>
                        </div>
                      </div>
                    </div>
                    <div class="presentation-card flex-row">
                      <div class="presentation-time-block flex-col justify-center">
                        <span class="presentation-time">11:00</span>
                        <div class="presentation-date">2025.07.11</div>
                      </div>
                      <div class="presentation-details flex-col justify-between">
                        <span class="presentation-company">上海米哈游网络科技股份有限公司</span>
                        <div class="presentation-location flex-row">
                          <img
                            class="location-icon"
                            referrerpolicy="no-referrer"
                            src="./img/FigmaDDSSlicePNG83762d4835a626986fd1d2eb9c56cd03.png"
                          />
                          <span class="location-text">华东师范大学学生活动中心2025</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="box_24 flex-row justify-between">
                    <div class="presentation-card flex-row">
                      <div class="presentation-time-block flex-col justify-center">
                        <span class="presentation-time">11:00</span>
                        <div class="presentation-date">2025.07.11</div>
                      </div>
                      <div class="presentation-details flex-col justify-between">
                        <span class="presentation-company">上海米哈游网络科技股份有限公司</span>
                        <div class="presentation-location flex-row">
                          <img
                            class="location-icon"
                            referrerpolicy="no-referrer"
                            src="./img/FigmaDDSSlicePNG83762d4835a626986fd1d2eb9c56cd03.png"
                          />
                          <span class="location-text">华东师范大学学生活动中心2025</span>
                        </div>
                      </div>
                    </div>
                    <div class="presentation-card flex-row">
                      <div class="presentation-time-block flex-col justify-center">
                        <span class="presentation-time">11:00</span>
                        <div class="presentation-date">2025.07.11</div>
                      </div>
                      <div class="presentation-details flex-col justify-between">
                        <span class="presentation-company">上海米哈游网络科技股份有限公司</span>
                        <div class="presentation-location flex-row">
                          <img
                            class="location-icon"
                            referrerpolicy="no-referrer"
                            src="./img/FigmaDDSSlicePNG83762d4835a626986fd1d2eb9c56cd03.png"
                          />
                          <span class="location-text">华东师范大学学生活动中心2025</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 招聘会内容 -->
                <div class="section_13 flex-col" id="job-fair-content" style="display: none;">
                  <div class="box_19 flex-row justify-between">
                    <div class="presentation-card flex-row">
                      <div class="presentation-time-block flex-col justify-center">
                        <span class="presentation-time">11:00</span>
                        <div class="presentation-date">2025.07.11</div>
                      </div>
                      <div class="presentation-details flex-col justify-between">
                        <span class="presentation-company">上海交大.华东师范大学2025届毕业毕业生...</span>
                        <div class="presentation-location flex-row">
                          <img
                            class="location-icon"
                            referrerpolicy="no-referrer"
                            src="./img/FigmaDDSSlicePNG83762d4835a626986fd1d2eb9c56cd03.png"
                          />
                          <span class="location-text">华东师范大学学生活动中心2025</span>
                        </div>
                      </div>
                    </div>
                    <div class="presentation-card flex-row">
                      <div class="presentation-time-block flex-col justify-center">
                        <span class="presentation-time">11:00</span>
                        <div class="presentation-date">2025.07.11</div>
                      </div>
                      <div class="presentation-details flex-col justify-between">
                        <span class="presentation-company">上海交大.华东师范大学2025届毕业毕业生...</span>
                        <div class="presentation-location flex-row">
                          <img
                            class="location-icon"
                            referrerpolicy="no-referrer"
                            src="./img/FigmaDDSSlicePNG83762d4835a626986fd1d2eb9c56cd03.png"
                          />
                          <span class="location-text">华东师范大学学生活动中心2025</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="box_22 flex-row justify-between">
                    <div class="presentation-card flex-row">
                      <div class="presentation-time-block flex-col justify-center">
                        <span class="presentation-time">11:00</span>
                        <div class="presentation-date">2025.07.11</div>
                      </div>
                      <div class="presentation-details flex-col justify-between">
                        <span class="presentation-company">上海交大.华东师范大学2025届毕业毕业生...</span>
                        <div class="presentation-location flex-row">
                          <img
                            class="location-icon"
                            referrerpolicy="no-referrer"
                            src="./img/FigmaDDSSlicePNG83762d4835a626986fd1d2eb9c56cd03.png"
                          />
                          <span class="location-text">华东师范大学学生活动中心2025</span>
                        </div>
                      </div>
                    </div>
                    <div class="presentation-card flex-row">
                      <div class="presentation-time-block flex-col justify-center">
                        <span class="presentation-time">11:00</span>
                        <div class="presentation-date">2025.07.11</div>
                      </div>
                      <div class="presentation-details flex-col justify-between">
                        <span class="presentation-company">上海交大.华东师范大学2025届毕业毕业生...</span>
                        <div class="presentation-location flex-row">
                          <img
                            class="location-icon"
                            referrerpolicy="no-referrer"
                            src="./img/FigmaDDSSlicePNG83762d4835a626986fd1d2eb9c56cd03.png"
                          />
                          <span class="location-text">华东师范大学学生活动中心2025</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="box_24 flex-row justify-between">
                    <div class="presentation-card flex-row">
                      <div class="presentation-time-block flex-col justify-center">
                        <span class="presentation-time">11:00</span>
                        <div class="presentation-date">2025.07.11</div>
                      </div>
                      <div class="presentation-details flex-col justify-between">
                        <span class="presentation-company">上海交大.华东师范大学2025届毕业毕业生...</span>
                        <div class="presentation-location flex-row">
                          <img
                            class="location-icon"
                            referrerpolicy="no-referrer"
                            src="./img/FigmaDDSSlicePNG83762d4835a626986fd1d2eb9c56cd03.png"
                          />
                          <span class="location-text">华东师范大学学生活动中心2025</span>
                        </div>
                      </div>
                    </div>
                    <div class="presentation-card flex-row">
                      <div class="presentation-time-block flex-col justify-center">
                        <span class="presentation-time">11:00</span>
                        <div class="presentation-date">2025.07.11</div>
                      </div>
                      <div class="presentation-details flex-col justify-between">
                        <span class="presentation-company">上海交大.华东师范大学2025届毕业毕业生...</span>
                        <div class="presentation-location flex-row">
                          <img
                            class="location-icon"
                            referrerpolicy="no-referrer"
                            src="./img/FigmaDDSSlicePNG83762d4835a626986fd1d2eb9c56cd03.png"
                          />
                          <span class="location-text">华东师范大学学生活动中心2025</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="box_26 flex-row justify-between">
                    <div class="presentation-card flex-row">
                      <div class="presentation-time-block flex-col justify-center">
                        <span class="presentation-time">11:00</span>
                        <div class="presentation-date">2025.07.11</div>
                      </div>
                      <div class="presentation-details flex-col justify-between">
                        <span class="presentation-company">上海交大.华东师范大学2025届毕业毕业生...</span>
                        <div class="presentation-location flex-row">
                          <img
                            class="location-icon"
                            referrerpolicy="no-referrer"
                            src="./img/FigmaDDSSlicePNG83762d4835a626986fd1d2eb9c56cd03.png"
                          />
                          <span class="location-text">华东师范大学学生活动中心2025</span>
                        </div>
                      </div>
                    </div>
                    <div class="presentation-card flex-row">
                      <div class="presentation-time-block flex-col justify-center">
                        <span class="presentation-time">11:00</span>
                        <div class="presentation-date">2025.07.11</div>
                      </div>
                      <div class="presentation-details flex-col justify-between">
                        <span class="presentation-company">上海交大.华东师范大学2025届毕业毕业生...</span>
                        <div class="presentation-location flex-row">
                          <img
                            class="location-icon"
                            referrerpolicy="no-referrer"
                            src="./img/FigmaDDSSlicePNG83762d4835a626986fd1d2eb9c56cd03.png"
                          />
                          <span class="location-text">华东师范大学学生活动中心2025</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="section_18 flex-col" id="calendar-container">
                  <div class="section_19 flex-row">
                    <div class="calendar-prev-btn" style="cursor: pointer; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;">
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M15 18L9 12L15 6" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      </svg>
                    </div>
                    <div class="box_25 flex-col"></div>
                    <span class="text_75" id="calendar-month-year">2025年7月</span>
                    <div class="calendar-next-btn" style="cursor: pointer; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;">
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9 18L15 12L9 6" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      </svg>
                    </div>
                  </div>
                  <div class="text-wrapper_5 flex-row justify-between">
                    <span class="text_76">周日</span>
                    <span class="text_77">周一</span>
                    <span class="text_78">周二</span>
                    <span class="text_79">周三</span>
                    <span class="text_80">周四</span>
                    <span class="text_81">周五</span>
                    <span class="text_82">周六</span>
                  </div>
                  <div id="calendar-grid">
                    <!-- 日历网格将由JavaScript动态生成 -->
                  </div>
                  <div class="section_24 flex-col"></div>
                </div>
              </div>
              <div class="box_27 flex-row justify-between">
                <div class="group_32 flex-col">
                  <div class="box_28 flex-col">
                    <img
                      class="icon-img"
                      referrerpolicy="no-referrer"
                      src="./img/consultation_icon.png"
                    />
                  </div>
                  <div class="text-group_10 flex-col justify-between">
                    <span class="text_111">咨询预约</span>
                    <span class="text_112">Consultation&nbsp;appointment</span>
                  </div>
                </div>
                <div class="group_35 flex-col">
                  <div class="group_36 flex-col">
                    <img
                      class="icon-img"
                      referrerpolicy="no-referrer"
                      src="./img/youth_questions_icon.png"
                    />
                  </div>
                  <div class="text-group_11 flex-col justify-between">
                    <span class="text_113">青年百问</span>
                    <span class="text_114">
                      Youth&nbsp;hundred&nbsp;questions
                    </span>
                  </div>
                </div>
                <div class="group_37 flex-col">
                  <div class="section_28 flex-col">
                    <img
                      class="icon-img"
                      referrerpolicy="no-referrer"
                      src="./img/consultation_icon.png"
                    />
                  </div>
                  <div class="text-group_12 flex-col justify-between">
                    <span class="text_115">咨询预约</span>
                    <span class="text_116">Consultation&nbsp;appointment</span>
                  </div>
                </div>
                <div class="group_41 flex-col">
                  <div class="group_42 flex-col">
                    <img
                      class="icon-img"
                      referrerpolicy="no-referrer"
                      src="./img/international_org_icon.png"
                    />
                  </div>
                  <div class="text-group_13 flex-col justify-between">
                    <span class="text_117">国际组织</span>
                    <span class="text_118">
                      international&nbsp;organizations
                    </span>
                  </div>
                </div>
                <div class="group_43 flex-col">
                  <div class="block_13 flex-col">
                    <img
                      class="icon-img"
                      referrerpolicy="no-referrer"
                      src="./img/entrepreneurship_icon.png"
                    />
                  </div>
                  <div class="text-group_14 flex-col justify-between">
                    <span class="text_119">创业指导</span>
                    <span class="text_120">Entrepreneurship&nbsp;guidance</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 主内容区域：左右分栏布局 -->
          <div class="section_31 flex-row justify-between">
            <!-- 左侧面板：通知公告 -->
            <div class="left-panel-container">
              <div class="block_15 flex-row">
                <div class="box_37 flex-col">
                  <div class="block_16 flex-col"></div>
                </div>
                <span class="text_121">通知公告</span>
                <div class="image-text_1 flex-row justify-between">
                  <span class="text-group_15">查看更多</span>
                  <img
                    class="thumbnail_1"
                    referrerpolicy="no-referrer"
                    src="./img/FigmaDDSSlicePNGc707c4fca7959e307bc531337fd12f3b.png"
                  />
                </div>
              </div>
              <!-- 通知公告内容 -->
              <div class="notice-content-list">
                <div class="notice-item-row flex-row">
                  <div class="notice-time-wrapper flex-col justify-between">
                    <span class="notice-time">02</span>
                    <span class="notice-date">2024.07</span>
                  </div>
                  <div class="notice-details flex-col justify-between">
                    <span class="notice-title">
                      上海市嘉定区金鹤学校2025学年编外教师招聘公告
                    </span>
                    <span class="notice-category">教育</span>
                  </div>
                </div>
                <div class="notice-item-row flex-row">
                  <div class="notice-time-wrapper flex-col justify-between">
                    <span class="notice-time">02</span>
                    <span class="notice-date">2024.07</span>
                  </div>
                  <div class="notice-details flex-col justify-between">
                    <span class="notice-title">
                      上海市嘉定区金鹤学校2025学年编外教师招聘公告
                    </span>
                    <span class="notice-category">教育</span>
                  </div>
                </div>
                <div class="notice-item-row flex-row">
                  <div class="notice-time-wrapper flex-col justify-between">
                    <span class="notice-time">02</span>
                    <span class="notice-date">2024.07</span>
                  </div>
                  <div class="notice-details flex-col justify-between">
                    <span class="notice-title">
                      上海市嘉定区金鹤学校2025学年编外教师招聘公告
                    </span>
                    <span class="notice-category">教育</span>
                  </div>
                </div>
              </div>
            </div>

            <!-- 右侧面板：策生涯/生涯活动 -->
            <div class="right-panel-container">
              <div class="block_17 flex-row">
                <div class="group_44 flex-col justify-center align-center">
                  <div class="section_32 flex-col"></div>
                </div>
                <div class="text-wrapper_34 flex-col">
                  <span class="text_122">策生涯</span>
                </div>
                <span class="text_123">生涯活动</span>
                <div class="image-text_2 flex-row justify-between">
                  <span class="text-group_16">查看更多</span>
                  <img
                    class="thumbnail_2"
                    referrerpolicy="no-referrer"
                    src="./img/FigmaDDSSlicePNGc707c4fca7959e307bc531337fd12f3b.png"
                  />
                </div>
              </div>

              <!-- 策生涯内容（默认显示） -->
              <div class="career-content" id="career-content">
                <div class="career-item-row flex-row">
                  <div class="career-time-wrapper flex-col justify-between">
                    <span class="career-time">02</span>
                    <span class="career-date">2024.07</span>
                  </div>
                  <div class="career-details flex-col justify-between">
                    <span class="career-title">
                      上海市嘉定区金鹤学校2025学年编外教师招聘公告
                    </span>
                    <span class="career-location">教育</span>
                  </div>
                </div>
                <div class="career-item-row flex-row">
                  <div class="career-time-wrapper flex-col justify-between">
                    <span class="career-time">02</span>
                    <span class="career-date">2024.07</span>
                  </div>
                  <div class="career-details flex-col justify-between">
                    <span class="career-title">
                      上海市嘉定区金鹤学校2025学年编外教师招聘公告
                    </span>
                    <span class="career-location">教育</span>
                  </div>
                </div>
                <div class="career-item-row flex-row">
                  <div class="career-time-wrapper flex-col justify-between">
                    <span class="career-time">02</span>
                    <span class="career-date">2024.07</span>
                  </div>
                  <div class="career-details flex-col justify-between">
                    <span class="career-title">
                      上海市嘉定区金鹤学校2025学年编外教师招聘公告
                    </span>
                    <span class="career-location">教育</span>
                  </div>
                </div>
              </div>

              <!-- 生涯活动内容（隐藏状态） -->
              <div class="career-activity-content" id="career-activity-content" style="display: none;">
                <div class="activity-item-row flex-row">
                  <div class="activity-time-wrapper flex-col justify-between">
                    <span class="activity-time">12:59</span>
                    <span class="activity-date">2024.07.25</span>
                  </div>
                  <div class="activity-details flex-col justify-between">
                    <span class="activity-title">
                      全学段生涯1沉浸式体验、启发学生学习兴趣
                    </span>
                    <span class="activity-location-text">学生活动中心2025</span>
                  </div>
                </div>
                <div class="activity-item-row flex-row">
                  <div class="activity-time-wrapper flex-col justify-between">
                    <span class="activity-time">12:59</span>
                    <span class="activity-date">2024.07.25</span>
                  </div>
                  <div class="activity-details flex-col justify-between">
                    <span class="activity-title">
                      全学段生涯1沉浸式体验、启发学生学习兴趣
                    </span>
                    <span class="activity-location-text">学生活动中心2025</span>
                  </div>
                </div>
                <div class="activity-item-row flex-row">
                  <div class="activity-time-wrapper flex-col justify-between">
                    <span class="activity-time">12:59</span>
                    <span class="activity-date">2024.07.25</span>
                  </div>
                  <div class="activity-details flex-col justify-between">
                    <span class="activity-title">
                      全学段生涯1沉浸式体验、启发学生学习兴趣
                    </span>
                    <span class="activity-location-text">学生活动中心2025</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
                </div> <!-- 关闭 content-wrapper -->
              </div>
            </div>
              </div>
          </div>
        </div>
      </div>

       <!-- 底部导航栏 -->
     <div class="footer-container">
       
        <div class="section_38 flex-col">
            <div class="box_43 flex-col">
                <div class="box_44 flex-col">
                    <!-- 底部链接区域 -->
                    <div class="box_45 flex-row justify-between">
                        <div class="block_20 flex-row">
                            <img
                                class="image_3"
                                referrerpolicy="no-referrer"
                                src="./img/FigmaDDSSlicePNG23892d3ceb396a97ebee29409d17a75c.png"
                            />
                            <span class="text_153">选调生专区</span>
                            <div class="box_46 flex-col"></div>
                        </div>
                        <div class="block_21 flex-row">
                            <img
                                class="image_4"
                                referrerpolicy="no-referrer"
                                src="./img/FigmaDDSSlicePNG46951c0f274e9dea740ca72ea148b609.png"
                            />
                            <span class="paragraph_1">
                                国家大学生
                                <br />
                                就业服务平台
                            </span>
                            <div class="box_47 flex-col"></div>
                        </div>
                        <div class="block_22 flex-col">
                            <img
                                class="image_5"
                                referrerpolicy="no-referrer"
                                src="./img/FigmaDDSSlicePNGdd5b48da4c79e9106f5233136258efec.png"
                            />
                            <div class="group_49 flex-col"></div>
                        </div>
                        <div class="block_23 flex-col">
                            <div class="text-wrapper_48 flex-col">
                                <span class="paragraph_2">
                                    国际组织
                                    <br />
                                    实习信息平台
                                </span>
                            </div>
                            <div class="box_48 flex-col"></div>
                        </div>
                        <div class="block_24 flex-row">
                            <span class="paragraph_3">
                                上海市
                                <br />
                                学生事务中心
                            </span>
                            <div class="box_49 flex-col"></div>
                        </div>
                    </div>

                    <!-- 版权信息 -->
                    <span class="paragraph_4">
                        普陀校区地址：大学生中心308室&nbsp;&nbsp;&nbsp;电话：021-62232272
                        <br />
                        闵行校区地址：学生之家B202室&nbsp;&nbsp;&nbsp;电话：021-54372016
                        <br />
                        邮箱：career&#64;career.ecnu.edu.cn
                        <br />
                        Copyright&nbsp;&#64;&nbsp;2024&nbsp;华东师范大学v2024.1.0
                    </span>
                </div>
            </div>

            <!-- 背景图片 -->
            <img
                class="image_6"
                referrerpolicy="no-referrer"
                src="./img/FigmaDDSSlicePNGef37c0ca2dbf69405545f288b3c8e327.png"
            />
        </div>
    </div>
      </div>
    </div>

    <script>
      // header部分
      
      // 使用原生JavaScript实现导航功能
      document.addEventListener('DOMContentLoaded', function () {
        // 获取元素
        const navStudent = document.getElementById('nav-student');
        const studentDropdown = document.getElementById('student-dropdown');
        const navItems = document.querySelectorAll('.nav-item');

        // 隐藏下拉菜单
        if (studentDropdown) {
          studentDropdown.style.display = 'none';
          studentDropdown.style.pointerEvents = 'none';
        }

        // 学生服务悬停效果
        if (navStudent && studentDropdown) {
          navStudent.addEventListener('mouseenter', function () {
            studentDropdown.style.display = 'flex';
            studentDropdown.style.pointerEvents = 'auto';
          });

          navStudent.addEventListener('mouseleave', function () {
            setTimeout(function () {
              if (!studentDropdown.matches(':hover')) {
                studentDropdown.style.display = 'none';
                studentDropdown.style.pointerEvents = 'none';
              }
            }, 100);
          });

          // 下拉菜单悬停效果
          studentDropdown.addEventListener('mouseenter', function () {
            this.style.display = 'flex';
            this.style.pointerEvents = 'auto';
          });

          studentDropdown.addEventListener('mouseleave', function () {
            this.style.display = 'none';
            this.style.pointerEvents = 'none';
          });
        }

        // 导航菜单悬停效果（下划线）
        navItems.forEach(function (item) {
          item.addEventListener('mouseenter', function () {
            if (!this.classList.contains('active')) {
              this.classList.add('hover');
            }
          });

          item.addEventListener('mouseleave', function () {
            if (!this.classList.contains('active')) {
              this.classList.remove('hover');
            }
          });
        });
      });
    
      // 招聘公告/宣讲会/招聘会 标签切换功能
      document.addEventListener('DOMContentLoaded', function() {
        const tabItems = [
          {
            id: 'nav-job-announcement',
            element: null,
            contentId: 'job-announcement-content'
          },
          {
            id: 'nav-presentation',
            element: null,
            contentId: 'presentation-content'
          },
          {
            id: 'nav-job-fair',
            element: null,
            contentId: 'job-fair-content'
          }
        ];

        // 获取标签元素和内容元素
        tabItems.forEach(item => {
          item.element = document.getElementById(item.id);
          item.contentElement = document.getElementById(item.contentId);
        });

        // 切换标签内容的函数
        function switchTab(activeTabId) {
          tabItems.forEach(item => {
            if (item.element && item.contentElement) {
              if (item.id === activeTabId) {
                // 激活当前标签
                item.element.classList.add('active');
                item.contentElement.style.display = 'flex';
              } else {
                // 取消其他标签
                item.element.classList.remove('active');
                item.contentElement.style.display = 'none';
              }
            }
          });
        }

        // 为每个标签添加点击事件
        tabItems.forEach(item => {
          if (item.element) {
            item.element.addEventListener('click', function() {
              switchTab(item.id);
            });
          }
        });

        // 默认显示招聘公告标签
        switchTab('nav-job-announcement');
      });
    </script>
  </body>

  <script>
    // 动态日历功能
    class DynamicCalendar {
      constructor() {
        this.currentDate = new Date();
        this.currentYear = this.currentDate.getFullYear();
        this.currentMonth = this.currentDate.getMonth();

        // 定义特殊日期（显示红色圆圈的日期）
        this.specialDates = [
          { year: 2025, month: 6, date: 2 },  // 7月2日 (月份从0开始)
          { year: 2025, month: 6, date: 5 },  // 7月5日
          { year: 2025, month: 6, date: 8 },  // 7月8日
          { year: 2025, month: 6, date: 11 }, // 7月11日
          // 可以添加其他月份的特殊日期
          { year: 2025, month: 7, date: 3 },  // 8月3日
          { year: 2025, month: 7, date: 15 }, // 8月15日
        ];

        this.monthNames = [
          '1月', '2月', '3月', '4月', '5月', '6月',
          '7月', '8月', '9月', '10月', '11月', '12月'
        ];

        this.init();
      }

      init() {
        this.renderCalendar();
        this.bindEvents();
      }

      bindEvents() {
        const prevBtn = document.querySelector('.calendar-prev-btn');
        const nextBtn = document.querySelector('.calendar-next-btn');

        if (prevBtn) {
          prevBtn.addEventListener('click', () => {
            this.previousMonth();
          });
        }

        if (nextBtn) {
          nextBtn.addEventListener('click', () => {
            this.nextMonth();
          });
        }
      }

      previousMonth() {
        this.currentMonth--;
        if (this.currentMonth < 0) {
          this.currentMonth = 11;
          this.currentYear--;
        }
        this.renderCalendar();
      }

      nextMonth() {
        this.currentMonth++;
        if (this.currentMonth > 11) {
          this.currentMonth = 0;
          this.currentYear++;
        }
        this.renderCalendar();
      }

      isSpecialDate(year, month, date) {
        return this.specialDates.some(special =>
          special.year === year &&
          special.month === month &&
          special.date === date
        );
      }

      renderCalendar() {
        // 更新月份年份显示
        const monthYearElement = document.getElementById('calendar-month-year');
        if (monthYearElement) {
          monthYearElement.textContent = `${this.currentYear}年${this.monthNames[this.currentMonth]}`;
        }

        // 获取当月第一天和最后一天
        const firstDay = new Date(this.currentYear, this.currentMonth, 1);
        const lastDay = new Date(this.currentYear, this.currentMonth + 1, 0);
        const firstDayOfWeek = firstDay.getDay(); // 0 = 周日
        const daysInMonth = lastDay.getDate();

        // 获取上个月的最后几天
        const prevMonth = new Date(this.currentYear, this.currentMonth, 0);
        const daysInPrevMonth = prevMonth.getDate();

        // 生成日历网格
        const calendarGrid = document.getElementById('calendar-grid');
        if (!calendarGrid) return;

        calendarGrid.innerHTML = '';

        let dayCount = 1;
        let nextMonthDayCount = 1;

        // 计算需要多少行（根据实际需要，但限制在合理范围内）
        const totalCells = firstDayOfWeek + daysInMonth;
        const weeksNeeded = Math.ceil(totalCells / 7);
        // 如果当月日期可以在5行内显示完，就不显示下个月的日期
        const maxWeeks = weeksNeeded <= 5 ? weeksNeeded : Math.min(weeksNeeded, 6);

        // 生成日历网格
        for (let week = 0; week < maxWeeks; week++) {
          const weekRow = document.createElement('div');
          // 使用不同的section类名来匹配原有样式
          const sectionClass = `section_${20 + Math.min(week, 3)}`;
          weekRow.className = `${sectionClass} flex-row justify-between`;

          // 生成一周的7天
          for (let day = 0; day < 7; day++) {
            const dayIndex = week * 7 + day;
            const dayWrapper = document.createElement('div');
            const daySpan = document.createElement('span');

            if (dayIndex < firstDayOfWeek) {
              // 上个月的日期（灰色显示）
              const prevMonthDate = daysInPrevMonth - firstDayOfWeek + dayIndex + 1;
              daySpan.textContent = prevMonthDate.toString().padStart(2, '0');
              dayWrapper.className = 'text-wrapper_6 flex-col';
              daySpan.className = 'text_83';
            } else if (dayCount <= daysInMonth) {
              // 当前月的日期
              daySpan.textContent = dayCount.toString().padStart(2, '0');

              // 检查是否是特殊日期（红色圆圈）
              if (this.isSpecialDate(this.currentYear, this.currentMonth, dayCount)) {
                dayWrapper.className = 'text-wrapper_8 flex-col';
                daySpan.className = 'text_85';
              } else {
                dayWrapper.className = 'text-wrapper_7 flex-col';
                daySpan.className = 'text_84';
              }

              dayCount++;
            } else {
              // 下个月的日期（灰色显示）- 只在必要时显示
              if (week < 5) { // 只在前5行显示下个月日期
                daySpan.textContent = nextMonthDayCount.toString().padStart(2, '0');
                dayWrapper.className = 'text-wrapper_6 flex-col';
                daySpan.className = 'text_83';
                nextMonthDayCount++;
              } else {
                // 空白单元格
                daySpan.textContent = '';
                dayWrapper.className = 'text-wrapper_6 flex-col';
                daySpan.className = 'text_83';
              }
            }

            dayWrapper.appendChild(daySpan);
            weekRow.appendChild(dayWrapper);
          }

          calendarGrid.appendChild(weekRow);
        }
      }
    }

    // 策生涯和生涯活动切换功能
    class TabSwitcher {
      constructor() {
        this.init();
      }

      init() {
        const strategyTab = document.querySelector('.text_122'); // 策生涯
        const activityTab = document.querySelector('.text_123'); // 生涯活动

        if (strategyTab && activityTab) {
          strategyTab.addEventListener('click', () => {
            this.switchToStrategy(strategyTab, activityTab);
          });

          activityTab.addEventListener('click', () => {
            this.switchToActivity(strategyTab, activityTab);
          });
        }
      }

      switchToStrategy(strategyTab, activityTab) {
        // 激活策生涯，取消生涯活动
        strategyTab.classList.remove('inactive');
        activityTab.classList.remove('active');

        // 显示策生涯内容，隐藏生涯活动内容
        const strategyContent = document.getElementById('career-content');
        const activityContent = document.getElementById('career-activity-content');

        if (strategyContent) {
          strategyContent.style.display = 'block';
        }

        if (activityContent) {
          activityContent.style.display = 'none';
        }

        console.log('切换到策生涯');
      }

      switchToActivity(strategyTab, activityTab) {
        // 激活生涯活动，取消策生涯
        strategyTab.classList.add('inactive');
        activityTab.classList.add('active');

        // 隐藏策生涯内容，显示生涯活动内容
        const strategyContent = document.getElementById('career-content');
        const activityContent = document.getElementById('career-activity-content');

        if (strategyContent) {
          strategyContent.style.display = 'none';
        }

        if (activityContent) {
          activityContent.style.display = 'block';
        }

        console.log('切换到生涯活动');
      }
    }

    // 页面加载完成后初始化日历和标签切换
    document.addEventListener('DOMContentLoaded', function() {
      new DynamicCalendar();
      new TabSwitcher();
    });
  </script>
</html>
